<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    :lock-scroll="false"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :class="{'global-mobile-dialog':showMobilePage}"
    class="subcribe-common-dialog small-common-dialog-size bp-dialog-container"
  >
    <Title title="设置BP" font-size="16px" style="margin-bottom:20px;"/>
    <el-form
      ref="BPStoreForm"
      :model="BPData"
      :rules="rules"
      :label-position="showMobilePage?'left':'right'"
      label-width="96px"
      class="lineHeight32 mb0">
      <el-form-item label="BP类型" prop="name">
        <el-input v-model="BPData.name" :maxlength="50" class="width240" clearable size="small" placeholder="最多可输入50字符" />
      </el-form-item>
      <el-form-item label="BP人员" prop="users">
        <SelectWithUserLoad
          v-model="BPData.users"
          :default-list="initUsers || []"
          :value-type="'object'"
          key-name="id"
          label-name="userName"
          placeholder="请选择人员(多选)"
          multiple
          filterable
          collapse-tags
          show-check-user
          clearable
          class="width240"
        />
      </el-form-item>
      <el-form-item label="负责部门" prop="depts" style="margin-bottom: 0;">
        <CascaderSelect
          v-model="BPData.depts"
          :options="deptTreeList"
          children="children"
          placeholder="请选择负责部门(多选)"
          popper-class="cascader-depts"
          class="width240"
        />
      </el-form-item>
      <el-form-item label=" " style="margin-bottom: 0;">
        <el-checkbox v-model="BPData.isIncludeSubDept" style="margin-top: 10px;">包含子部门</el-checkbox>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button :disabled="loading" class="ok" type="primary" @click="handleConfirm">{{ isEdit ? '保存' : '确定' }}</el-button>
      <el-button class="cancel-btn-style" type="info" @click="handleDialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import CascaderSelect from '@/components/Tool/module/cascaderSelect';
import { mapState } from 'vuex';

export default {
  name: 'BPStoreDialog',
  components: {
    Title,
    SelectWithUserLoad,
    CascaderSelect
  },
  props: {
    deptTreeList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      modalMaskDom: null,
      initUsers: [],
      BPData: {
        name: '',
        users: [],
        depts: [],
        isIncludeSubDept: false
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    rules() {
      return {
        'name': [{ required: true, message: '请输入BP类型', trigger: 'blur' }],
        'users': [{ required: true, message: '请选择BP人员', trigger: 'change' }],
        'depts': [{ required: true, message: '请选择负责部门', trigger: 'change' }]
      };
    }
  },
  methods: {
    initBPDialog(data) {
      const BPData = _.cloneDeep(data);
      BPData.depts = data.deptList.map(item => item.id);
      this.BPData = BPData;
      this.initUsers = data.users || [];
    },
    handleDialogClose() {
      this.$refs['BPStoreForm'].resetFields();
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.$refs['BPStoreForm'].validate(valid => {
        if (valid) {
          const BPData = {};
          if (this.isEdit) BPData.id = this.BPData.id;
          BPData.name = this.BPData.name;
          BPData.users = this.BPData.users.map(user => user.id).join();
          BPData.depts = this.BPData.depts.join();
          BPData.isIncludeSubDept = this.BPData.isIncludeSubDept;
          this.isEdit ? this.$emit('handleBPEdit', BPData) : this.$emit('handleBPCreate', BPData);
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  ::v-deep {
    .el-select {
      width: 240px;
    }
  }
}
.bp-dialog-container {
  &::v-deep {
    .el-form-item__content {
      width: 240px;
      margin-left: 0 !important;
      .el-input__suffix {
        display: flex;
        align-items: center;
      }
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        width: 240px;
        font-size: 14px;
        &::-webkit-input-placeholder {
          color: #c0c4cc;
        }
      }
    }
    .el-form-item {
      display: flex;
      justify-content: center;
    }
    .dept-select-container {
      width: 240px;
    }
  }
  .cascader-depts {
    .cascader-tags .el-tag > span {
      max-width: 110px;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .ok {
    width: 120px;
    font-size: 16px;
    padding: 8px 20px;
  }
  .cancel-btn-style {
    font-size: 14px;
    padding: 8px 20px;
    margin-left: 16px !important;
  }
}
</style>
